<template>
  <div class="detail2-container">
    <div id="pdfDom" style="padding: 20px 40px;">
      <p class="detail2-title"><span></span><span>眼底图像检测报告</span><span>{{currentTime}}</span></p>
      <div class="detail2-info1" style="margin-top: 40px">
        <p class="title"><span>基&nbsp;本&nbsp;信&nbsp;息</span></p>
        <div class="info">
          <p>
            <span>病&nbsp;历&nbsp;号：<em>{{result.medical_num}}</em></span>
            <span>姓&nbsp;名：<em>{{result.name}}</em></span>
          </p>
          <p>
            <span>性&nbsp;别：<em>{{result.gender}}</em></span>
            <span>年&nbsp;龄：<em>{{result.age}}</em></span>
          </p>
          <p>
            <span>身&nbsp;份&nbsp;证&nbsp;号：<em>{{result.identify_num}}</em></span>
            <span>手&nbsp;机&nbsp;号：<em>{{result.phone}}</em></span>
          </p>
          <p>
            <span>籍&nbsp;贯：<em>{{result.birth_place}}</em></span>
            <span>家&nbsp;族&nbsp;病&nbsp;史：<em>{{result.medical_history}}</em></span>
          </p>
        </div>
        <p class="title" style="margin-top: 20px"><span>筛&nbsp;查&nbsp;内&nbsp;容</span></p>
        <div class="image">
          <div class="left"><img :src="result.url" alt=""></div>
          <div class="screening-content right">
            <p class="table-one"><span>微动脉瘤</span></p>
            <p class="table-one">
              <span>数量</span><span>4</span><span>象限</span><span>1、2</span>
            </p>
            <p class="table-one"><span>视网膜内出血</span></p>
            <p class="table-one">
              <span>数量</span><span>2</span><span>象限</span><span>3</span>
            </p>
            <p class="table-one"><span>静脉串珠样改变</span></p>
            <p class="table-one">
              <span>数量</span><span>0</span><span>象限</span><span></span>
            </p>
            <p class="table-one"><span>显著的视网膜微血管异常</span></p>
            <p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;">
              <span>数量</span><span>0</span><span>象限</span><span></span>
            </p>
          </div>
        </div>
        <!--<p class="title"><span>眼&nbsp;底&nbsp;特&nbsp;征</span></p>-->
        <!--<div class="screening-content">-->
        <!--<p class="table-one"><span>微动脉瘤</span><span>视网膜内出血</span></p>-->
        <!--<p class="table-one">-->
        <!--<span>数量</span><span>4</span><span>象限</span><span>1、2</span><span>数量</span><span>2</span><span>象限</span><span>3</span>-->
        <!--</p>-->
        <!--<p class="table-one"><span>静脉串珠样改变</span><span>显著的视网膜微血管异常</span></p>-->
        <!--<p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;">-->
        <!--<span>数量</span><span>0</span><span>象限</span><span></span><span>数量</span><span>0</span><span>象限</span><span></span>-->
        <!--</p></div>-->
        <div class="screening-content"><p class="table-one"><span style="flex: 3 1 0%;">视网膜增厚及硬性渗出与黄斑中心凹的关系</span><span>远离</span>
        </p>
          <p class="table-one"><span>视网膜前出血</span><span>是</span><span>玻璃体积血</span><span>是</span></p>
          <p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;">
            <span>新生血管形成</span><span>是</span><span></span><span></span></p></div>
        <div class="screening-content" style="margin-top: 30px;"><p class="table-one"><span>垂直C/D及双眼差值</span><span>0.1002</span><span>水平C/D及双眼差值</span><span>0.234</span>
        </p>
          <p class="table-one"><span>盘周是否有出血</span><span>是</span><span>盘周是否有萎缩</span><span>否</span></p>
          <p class="table-one"><span style="flex: 3 1 0%;">上方、下方、鼻侧、颞侧盘沿宽窄</span><span>1，2，3，4</span></p>
          <p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;"><span style="flex: 3 1 0%;">神经纤维层是否有缺损</span><span>是</span>
          </p></div>
        <p class="title" style="margin-top: 30px"><span>智&nbsp;能&nbsp;检&nbsp;测&nbsp;结&nbsp;果</span></p>
        <div class="result"><p class="result-item-title"><span>序号</span><span>检测项</span><span>检测结果</span></p>
          <p><span>1</span><span>糖尿病视网膜病</span><span>无症状</span></p>
          <p><span>2</span><span>青光眼</span><span>90%患有青光眼</span></p></div>
        <p class="title"><span>专&nbsp;家&nbsp;诊&nbsp;断</span></p>
        <div class="diagnostic-opinion"><textarea name="" id="" cols="30" rows="7"
                                                  v-model="result.diagnostic_opinion"></textarea>
          <div class="submit">
            <button @click="submitDiagnosticOpinion">提交报告</button>
          </div>
        </div>
        <!--<p class="title"><span>机&nbsp;器&nbsp;印&nbsp;象</span></p>-->
        <!--<div class="result">-->
        <!--<p><span>序号</span><span>检测项</span><span>病变程度</span><span>健康预警</span></p>-->
        <!--<p><span>1</span><span>糖尿病视网膜病</span><span>无症状</span><span>无风险</span></p>-->
        <!--</div>-->
        <!--<p class="title"><span>专&nbsp;家&nbsp;诊&nbsp;断</span></p>-->
        <!--<div class="diagnostic-opinion">-->
        <!--<textarea name="" id="" cols="30" rows="10"></textarea>-->
        <!--<div class="submit">-->
        <!--<button>提交报告</button>-->
        <!--</div>-->
        <!--</div>-->
      </div>
      <div class="detail-info2">
        <p class="title"><span>眼&nbsp;底&nbsp;图&nbsp;检&nbsp;测&nbsp;报&nbsp;告</span></p>
        <!--<div class="detail">-->
        <!--<p class="plate">杯盘检测</p>-->
        <!--<p class="item"><span><em>上颧间距</em><em>88.323</em></span><span><em>下颧间距</em><em>97.529</em></span></p>-->
        <!--<p class="item"><span><em>鼻间距</em><em>63.325</em></span><span><em>颧间距</em><em>61.131</em></span></p>-->
        <!--</div>-->
        <div class="screening-image">
        <span>
          <img :src="result.vessel" alt="">
          <em>血管分割</em>
        </span>
          <span>
          <img :src="result.mass_vessel" alt="">
          <em>微动脉瘤标注</em>
        </span>
          <!--<span>-->
          <!--<img :src="result.odlocation" alt="">-->
          <!--<em>视盘视杯定位</em>-->
          <!--</span>-->
        </div>
      </div>
      <div class="print">
        <button @click="print">打印</button>
        <button @click="getPdf()">导出PDF</button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {apiPre} from "../js/config";
  import event from '../components/event';

  export default {
    name: "detail2",
    data() {
      return {
        result: {},
        currentTime: '',
        htmlTitle: ''
      }
    },
    methods: {
      print() {
        window.print();
      },
      submitDiagnosticOpinion() {
        axios.post(apiPre + 'addOpinion', {
          medical_num: this.result.medical_num,
          diagnostic_opinion: this.result.diagnostic_opinion
        }).then((res) => {
          console.log('addOpinion res', res);
        }).catch((err) => {
          console.log('addOpinion err', err);
        })
      }
    },
    // created() {
    //     window.addEventListener('message', function (e) {
    //       console.log('event.origin', e.origin)
    //       console.log('postmessage', e.data)
    //       alert(event.data)
    //     }, false)
    // },
    mounted() {
      console.log('this.$route', this.$route)
      this.currentTime = new Date().toLocaleDateString();
      axios.get(apiPre + 'detail', {params: {id: this.$route.params.id}}).then((res) => {
        console.log(res.data.data)
        this.result = res.data.data;
        this.htmlTitle = this.result.name;
        // console.log('this.htmlTitle', this.htmlTitle)
        // this.$Loading.finish();
        // console.log('this.result', this.result);
      }).catch((err) => {
        console.log(err)
        // alert(err)
        alert(err)
      })
    }
  }
</script>

<style scoped lang="scss">
  @media print {
    .print {
      display: none;
    }
    .submit {
      display: none;
    }
  }

  .detail2-container {
    /*margin: 20px 15%;*/
    .detail2-title {
      display: flex;
      justify-content: space-between;
      text-align: center;
      span {
        &:nth-child(2) {
          height: 40px;
          line-height: 40px;
          display: inline-block;
          font-size: 20px;
          background-color: rgb(175, 1, 10);
          color: rgb(255, 255, 255);
          padding: 0 20px;
          font-weight: bold;
          box-shadow: 5px 5px 5px rgba(10, 2, 4, 0.3);
        }
        &:last-child {
          font-size: 18px;
          height: 30px;
          margin-top: 20px;
        }
      }
    }
    .detail2-info1 {
      .title {
        border-bottom: 1px dashed rgb(11, 10, 10);
        span {
          font-size: 20px;
          color: rgb(223, 61, 85);
          border-bottom: 3px solid rgb(157, 0, 11);
          padding-bottom: 3px;
          font-weight: bold;
        }
      }
      .info {
        p {
          font-size: 18px;
          margin: 10px 0;
          span {
            display: inline-block;
            width: 49%;
            em {
              font-style: normal;
            }
          }
        }
      }
      .image {
        text-align: center;
        margin: 10px 0;
        display: flex;
        .left {
          flex: 2;
          display: flex;
          align-items: center;
          img {
            width: 100%;
            height: 321px;
            padding: 5px;
            border: 1px solid #000000;
          }
        }
        .right {
          flex: 3;
          height: 321px;
        }
        /*img {*/
        /*height: 375px;*/
        /*}*/
      }
      .screening-content {
        /*margin-top: 10px;*/
        margin-left: 5px;
        border-left: 1px solid #000000;
        .table-one {
          font-size: 18px;
          display: flex;
          justify-content: space-around;
          color: #000;
          height: 40px;
          line-height: 40px;
          border-top: 1px solid #000000;
          span {
            display: inline-block;
            flex: 1;
            text-align: center;
            position: relative;
            border-right: 1px solid #000000;
          }
        }
      }
      .result {
        margin: 10px 0;
        .result-item-title {
          background-color: rgb(157, 0, 11);
          color: rgb(255, 255, 255);
        }
        p {
          font-size: 18px;
          display: flex;
          justify-content: space-around;
          background-color: rgb(154, 154, 154);
          color: rgb(4, 4, 4);
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid #000000;
          &:first-child {
            border-bottom: 1px solid rgb(157, 0, 11);
          }
          &:last-child {
            border-bottom: none;
          }
          span {
            flex: 2;
            text-align: center;
            &:first-child {
              flex: 1;
            }
          }
        }
      }
      .diagnostic-opinion {
        margin: 20px 0;
        textarea {
          width: 100%;
          padding: 5px;
          font-size: 18px;
        }
        .submit {
          text-align: center;
          button {
            font-size: 18px;
            height: 40px;
            background-color: rgb(157, 0, 11);
            color: rgb(255, 255, 255);
            padding: 0 20px;
            box-shadow: 5px 5px 5px rgba(10, 2, 4, 0.3);
          }
        }
      }
    }
    .detail-info2 {
      @extend .detail2-info1;
      .detail {
        margin: 10px 0;
        .plate {
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          background-color: rgb(175, 1, 10);
          color: rgb(255, 255, 255);
          padding: 0 20px;
        }
        .item {
          line-height: 40px;
          font-size: 16px;
          border-bottom: 1px solid rgb(255, 255, 255);
          span {
            display: inline-block;
            width: 50%;
            background-color: rgb(154, 154, 154);
            padding: 0 20px;
            /*display: flex;*/
            /*justify-content: space-between;*/
            em {
              font-style: normal;
              display: inline-block;
              width: 50%;
              &:last-child {
                text-align: right;
              }
            }
            &:first-child {
              border-right: 1px solid rgb(255, 255, 255);
            }
          }
        }
      }
      .screening-image {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        span {
          width: 33%;
          display: inline-block;
          text-align: center;
          font-size: 16px;
          img {
            width: 100%;
          }
          em {
            font-style: normal;
          }
        }
      }
    }
    .print {
      margin-top: 20px;
      text-align: center;
      button {
        height: 30px;
        line-height: 30px;
        background-color: rgb(175, 1, 10);
        color: rgb(255, 255, 255);
        padding: 0 20px;
        font-size: 16px;
        box-shadow: 5px 5px 5px rgba(10, 2, 4, 0.3);
        &:first-child {
          margin-right: 100px;
        }
      }
    }
  }
</style>
